window.addEventListener("load",function(){
    var focus=document.querySelector(".focus");
    var ul=focus.children[0];
    var w=focus.offsetWidth;
    var index=0;
    var ol=document.querySelector("ol");

    for(var i=0;i<ul.children.length;i++){
        var li=document.createElement("LI");
        ol.appendChild(li);
    }
    ol.children[0].className="current";

    var number=ul.children.length;
    var first=ul.children[0].cloneNode(true);
    var last=ul.children[ul.children.length-1].cloneNode(true);
    ul.insertBefore(last,ul.children[0]);
    ul.appendChild(first);
    
    // console.log(number);
    var timer= setInterval(function(){
        index++;
        var translatex= -index* w;
        ul.style.transition="all .3s";
        ul.style.transform="translateX("+translatex+"px)";
    },2000);
    //等待过度完成后判断
    ul.addEventListener("transitionend",function(){
        //无缝滚动
        if(index >=number){
            index=0;
            ul.style.transition="none";
            var translatex= -index* w;
            ul.style.transform="translateX("+translatex+"px)";
        }
        if(index<0){
            index=number-1;
            ul.style.transition="none";
            var translatex= -index* w;
            ul.style.transform="translateX("+translatex+"px)";
        }

        //小圆点变化
        ol.querySelector(".current").classList.remove("current");
        ol.children[index].classList.add("current");
    });

    //手指
    var startx=0;
    var movex=0;
    ul.addEventListener("touchstart",function(e){

        startx=e.targetTouches[0].pageX;
    });
    ul.addEventListener("touchmove",function(e){
        movex=e.targetTouches[0].pageX-startx;
        var translatex=-index*w + movex;
        ul.style.transition="none";
        ul.style.transform="translateX("+translatex+"px)";
    });
    ul.addEventListener("touchend",function(e){
        if(Math.abs(movex)>50){
            if(movex>0){
                index--;
            }else{
                index++;
            }
            var translatex= -index* w;
            ul.style.transition="all .3s";
            ul.style.transform="translateX("+translatex+"px)";
        }else{
            var translatex= -index* w;
            ul.style.transition="all .1s";
            ul.style.transform="translateX("+translatex+"px)";
        }
    });

});